<template>
  <!-- 外卖 -->
  <div class="waimai current_con">
      <!-- 顶部 -->
      <TopHeader :title="address.name">
        <div class='search iconfont icon-search' slot="left"></div>
        <div class="login" slot="right">
            <a href="./login.html" style="color: #fff;">登录 </a>
            |
            <a href="./login.html" style="color: #fff;"> 注册</a>
        </div>
      </TopHeader>
      <!-- 轮播 -->
      <div class="swiper-container" style="background-color: #fff;">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(list, index) in food_fenlei_lists_Arr" :key="index">
                  <a href="javascript:;" v-for="item in list" :key="item.id"><img :src="imag_baseURL + item.image_url" alt=""><span>{{item.title}}</span></a>
              </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
      </div>
      <!-- 附近商家 -->
      <div class="shang_jia">
          <div class="top_">
              <a href="javascript:;"> <span class="iconfont icon-xixi" style="font-size: 20px"></span> 附近商家</a>
          </div>
          <ShoperList/>
      </div>
  </div>
</template>

<script>
    import Swiper from'../../assets/js/swiper.min.js'
    import ShoperList from '../ShoperList/ShoperList.vue'
    import {mapState} from 'vuex'

    export default {
        name:'Waimai',
        data() {
            return {
                imag_baseURL: 'https://fuss10.elemecdn.com'
            }
        },
        mounted() {
        },
        created() {
        },
        components: {ShoperList},
        computed: {
            ...mapState(['address', 'food_fenlei_list']),
            // 食物分类数据的加工  一维数组 => 二维数组
            food_fenlei_lists_Arr() {
                let big_Arr = [];
                let sma_Arr = [];
                // 遍历原始一维数组
                this.food_fenlei_list.forEach((item) => {
                    if(sma_Arr.length === 8) {
                        sma_Arr = [];
                    }
                    if(sma_Arr.length === 0) {
                        big_Arr.push(sma_Arr)
                    };
                    sma_Arr.push(item);
                });
                return big_Arr;
            }
        },
        watch: {
            food_fenlei_lists_Arr() {
                this.$nextTick(() => {
                    var mySwiper = new Swiper ('.swiper-container', {
                        // direction: 'vertical', // 垂直切换选项
                        loop: true, // 循环模式选项
                        
                        // 如果需要分页器
                        pagination: {
                        el: '.swiper-pagination'
                        }
                    });
                });
            }
        }
    }
</script>

<style lang="stylus" scoped>
.waimai
    .swiper-slide
        width 100%
        display flex
        flex-wrap wrap
        margin-bottom 20px
        a
            width 25%
            height 100px
            display flex
            flex-direction column
            align-items center
            justify-content space-evenly
            img
                width 50px
                height 50px
            span
                font-size 12px
    .shang_jia
        margin-top 10px
        background-color #fff
        .top_
            height 40px
            a
                // float left
                color #b5b5b5
                line-height 40px
                margin-left 10px
        
</style>
<style src="../../assets/css/reset.css" scoped></style>
